<template>
    <xh-pages>
        <view class="pages-container">
            <view class="withdrawal-container">
            </view>
            <view class="withdrawal-form">
                <view class="title">上传收款二维码</view>
                <view class="content">
                    <u-upload name="file" :fileList="user.withdrawal_url ? [{ url: user.withdrawal_url }] : []"
                        @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1" />
                </view>
            </view>
        </view>
    </xh-pages>
</template>
    
<script setup lang="ts">
import { upload } from "@/common/upload";
import { useUserStore } from "@/stores/user";
import { toast } from "@/utils/helpers";

const user = storeToRefs(useUserStore()).userInfo

// 设置提现二维码
const updateSetting = (url: string) => {
    uni.$u.http.post('Withdrawal/setting', {url}).then((res: any) => {
        uni.$emit('user::update');
        toast(res?.msg ?? '提现设置成功');
    });
}

// 读取后的回调
const afterRead = (e: any) => {
    const file = e.file[0];
    upload(file?.url ?? '').then((url: any) => {
        updateSetting(url);
    });
}
// 删除图片
const deletePic = (file: any) => {
    updateSetting('');
}
</script>
    
<style scoped lang="scss">
.pages-container {
    .withdrawal-container {
        background: linear-gradient(to right, var(--theme-color), var(--theme-active-color));
        height: 280rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;

        .title {
            font-size: 30rpx;
        }

        .money {
            font-weight: 700;
            margin-top: 10rpx;
        }
    }

    .withdrawal-form {
        background: #fff;
        padding: 30rpx;
        margin: -60rpx 20rpx 0 20rpx;
        border-radius: 10rpx;

        .title {
            font-size: 28rpx;
            font-weight: 700;
        }

        .content {
            display: flex;
            justify-content: center;
            padding-top: 50rpx;
        }
    }

    .bill-container {
        background: #fff;
        margin: 30rpx 20rpx 0 20rpx;

        .bill-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #666;

            .title {
                font-weight: 700;
                color: #333;
                padding: 30rpx;
            }

            .more {
                font-size: 28rpx;
                display: flex;
                align-items: center;
                padding: 30rpx;
            }
        }

        .list {
            margin-bottom: 20rpx;

            .item {
                padding: 30rpx;
                border-top: 1px solid #e5e5e5;
                display: flex;
                justify-content: space-between;
                font-size: 28rpx;

                .label {
                    flex: 1;
                    display: flex;
                    align-items: center;

                    .icon {
                        font-size: 60rpx;
                        padding-right: 20rpx;
                    }

                    .text {
                        font-size: 28rpx;
                        color: #666;

                        .remarks {
                            font-size: 28rpx;
                            color: #333;
                        }

                        .time {
                            font-size: 24rpx;
                            color: #999;
                        }
                    }
                }

                .value {
                    color: red;
                    display: flex;
                    align-items: center;
                    font-size: 34rpx;
                }
            }
        }

        .empty-container {
            padding: 50rpx 0 100rpx 0;
            border-top: 1px solid #e5e5e5;
        }
    }
}
</style>
    